<template>
    <div class="right content">
        <h3>自定义对象ESBoxEntity</h3>
        <button @click="createBox"> 创建对象</button>
        <button @click="editingBox">编辑位置</button>
        <button @click="flyTo">飞行定位</button>
        <button @click="removeBox">销毁对象</button>
    </div>
</template>

<script setup>
import { Message } from "earthsdk-ui";
import getMyProjectManager from '@/scripts/getMyProjectManager';
import { ESBoxEntity } from '@/ESEXObjects/index';
import { onBeforeUnmount } from "vue";
const pm = getMyProjectManager();

/**
 * @type {ESBoxEntity}
 */
let boxEntity;

const removeBox = () => {
    if (!boxEntity) return;
    pm.destroySceneObject(boxEntity);
    boxEntity = null;
    console.log('boxEntity removed');
}

const createBox = () => {
    boxEntity && (removeBox());
    const sceneObject = pm.createSceneObjectFromClass(ESBoxEntity);
    if (!sceneObject) return;
    // Message.success('对象创建成功，请在三维中点击选择对象初始位置,双击结束。');
    boxEntity = sceneObject;
    sceneObject.color = [1, 0, 0, 1];
    console.log('boxEntity created', boxEntity);

    Message.loading({ id: sceneObject.id, content: "对象创建成功，请在三维中点击选择位置，双击结束。" });
    sceneObject.editing = true;
    sceneObject.d(sceneObject.editingChanged.donce((e) => {
        !e && (Message.remove(sceneObject.id));
    }))
}

const flyTo = () => { boxEntity && boxEntity.flyTo(); }

const editingBox = () => { boxEntity && (boxEntity.editing = true); }

onBeforeUnmount(removeBox);

</script>

<style scoped>
.right {
    width: 100%;
    height: 100%;
    background: url(../../assets/right/kuang.png) no-repeat;
    background-size: 100% 100%;
}

.content {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.content button {
    padding: 10px 50px;
    margin-bottom: 20px;
    border-radius: 5px;
    cursor: pointer;
}
</style>
